<template>
    <div class="login-page">
        <group class="login-container" label-width="2.5em" label-margin-right="2em" label-align="right" title="登录/注册">
            <x-input title="账号" v-model="username"></x-input>
            <x-input title="密码" v-model="password" type="password"></x-input>
            <x-button @click.native="login">登录</x-button>
        </group>
    </div>
</template>

<script>
    import { Group, XInput, XButton, AlertPlugin, ToastPlugin } from 'vux'
    import Vue from 'vue'
    import Const from '../lib/const.js'
    Vue.use(AlertPlugin)
    Vue.use(ToastPlugin)
    export default {
      name: 'Login',
      components: {
        Group,
        XInput,
        XButton
    },
    data () {
        return {
            username: '',
            password: ''
        };
    },
    methods: {
        login() {
            var that = this;
            var qs = require('qs');
            if (this.username == '' || this.password == '') {
                this.$vux.alert.show({
                  content: '账号或密码不能为空'
              })
            } else {
              this.$http.post(Const.host + '/login', qs.stringify({
                username: this.username,
                password: this.password
            })).then(response => {
                console.log(response.data.data)
                if (response.data.data.length > 0) {
                    localStorage.setItem("token",response.data.data);
                    that.$vux.toast.show({
                        text: '登录成功',
                        time: 1000,
                        position: 'middle',
                        onHide: function(){
                            that.$router.push('/')
                        }
                    })
                } else {
                    that.$vux.toast.show({
                        text: '登录失败',
                        time: 1000
                    })
                }
                console.log(response)
            }, response => {
                console.log(response)
            });
        }
        }
    }
};
</script>

<style lang="less">
    @import '../assets/fontdpr_set.less';
    .login-page {
        height: 100%;
        background: url('../assets/bg_login.jpg');
        background-size: contain;
        .login-container {
            width: 7.8125rem;
            margin: auto;
            padding-top: 6.25rem;
            .font-dpr(12px);
            label, input, button{
                .font-dpr(12px);
            }
        }
    }
</style>